doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0")
    meta(http-equiv="format-detection", content="telephone=no")
    title= card.name+' | 微名片'
    block styles
      link(rel='stylesheet', href='//cdn.staticfile.org/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
      link(rel='stylesheet', href='//cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css')
      link(rel='stylesheet', href='/stylesheets/templ0.css')
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  body
    input#share_img(type="hidden", value=card.avatar.source)
    input#share_title(type="hidden", value="你好，我是#{card.name}，这是我的微名片。")
    input#share_content(type="hidden", value=card.bio)
    block content
      .header-deco
      .container
        .row
          .col-lg-12
            - var avatar = card.avatar.source ? "/uploads/avatar/" + card.avatar.source : "http://lorempixel.com/140/140/city";
            img.avatar.img-circle.img-responsive.img-thumbnail.center-block(src=avatar, style="width: 150px; height: 150px;")
            h2.text-center= card.name
            h4.text-center= card.position

      .container
        .row.text-center
          //- h3 Contacts
          .col-md-6.col-sm-12.col-xs-12.col-md-offset-3
            p.text-info
              h3= card.company
              //- br
              address: strong= card.address
                //- i.glyphicon.glyphicon-map-marker
                //- | #{card.address}

            ul.list-unstyled
              if card.email
                li
                  i.glyphicon.glyphicon-envelope
                  | &nbsp;
                  a(href="mailto:#{card.email}")= card.email
              if card.mobile
                li
                  i.glyphicon.glyphicon-phone
                  | &nbsp;#{card.mobile}
              if card.phone
                li
                  i.glyphicon.glyphicon-phone-alt
                  | &nbsp;#{card.phone}
              if card.site
                li
                  i.glyphicon.glyphicon-globe
                  | &nbsp;#{card.site}

        if card.qq || card.weixin || card.weibo
          .row.text-center
            .col-md-6.col-sm-12.col-xs-12.col-md-offset-3
              if card.qq
                a.btn.btn-link
                  i.fa.fa-lg.fa-qq.text-info
                  | #{card.qq}
              if card.weixin
                a.btn.btn-link
                  i.fa.fa-lg.fa-weixin.text-success
                  | #{card.weixin}
              if card.weibo
                a.btn.btn-link
                  i.fa.fa-lg.fa-weibo.text-danger
                  | #{card.weibo}

      .container.about
        .row
          .col-md-6.col-sm-12.col-xs-12.col-md-offset-3
            p
              i.fa.fa-quote-left.text-muted.fa-2x
              i.fa.fa-quote-right.text-muted
            p.text-center
              | #{card.bio}
      if (card.address && card.location.length)

        - var point = card.location
        - var marker = {lng: point[0], lat: point[1]};
        - var marker_img = marker.lng+','+marker.lat;
        - var marker_link = marker.lat+','+marker.lng;
        - var labels = card.company || '我的位置';
        - var labelStyle = '&labels='+marker_img+'&labelStyles='+labels+',0,14,0xff0000,0xffffff,1';
        - var map_img_attrs = {'src': 'http://api.map.baidu.com/staticimage?&scale=2&center='+marker_img+'&markers='+marker_img+'&width=320&height=240&zoom=14&copyright=1&markerStyles=l,,red'};
        - var map_link_attrs = {'href': 'http://api.map.baidu.com/marker?location='+marker_link+'&title='+labels+'&content=地址&output=html&src=vc_client', 'target': '_blank'};

        .container
          .row
            .map_img.col-md-6.col-sm-12.col-xs-12.col-md-offset-3
              a&attributes(map_link_attrs)
                img.img-responsive.img-thumbnail.img-rounded.center-block.map-img&attributes(map_img_attrs)
            .col-md-6.col-md-offset-3.col-sm-12.col-xs-12
              a.btn.btn-default.center-block(style="margin: 10px 0;")&attributes(map_link_attrs)
                | 地图导航
                i.fa.fa-arrow-circle-right

      footer(style="margin-top: 10px;")
        .container
          .row
            .col-lg-12
              p.text-center
                span.text-muted.copyright(style="font-family:arial;") &copy; 2014 HT Labs.

    block scripts
      script(type="text/javascript", src="//cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js")
      script(type="text/javascript", src="//cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.min.js")
      //- script(type="text/javascript", src="/javascripts/templ0.js")
      script.
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

          var share_url = window.location.href;
          var imageUrl = window.location.origin+"/uploads/avatar/"+$('#share_img').val();
          var title = $('#share_title').val();
          var desc = $("#share_content").val();

          // 发送给好友
          WeixinJSBridge.on('menu:share:appmessage', function (argv) {
            WeixinJSBridge.invoke('sendAppMessage', {
              "img_url": imageUrl,
              "img_width": "120",
              "img_height": "120",
              "link": share_url,
              "desc": desc ,
              "title": title
            }, function (res) {});
          });

          // 分享到朋友圈
          WeixinJSBridge.on('menu:share:timeline', function (argv) {

            var desc = $("#share_content").val();

            WeixinJSBridge.invoke('shareTimeline', {
              "img_url": imageUrl,
              "img_width": "120",
              "img_height": "120",
              "link": share_url ,
              "desc":  desc,
              "title": title
            }, function (res) {});

          });

          // 分享到微博
          WeixinJSBridge.on('menu:share:weibo', function (argv) {
            WeixinJSBridge.invoke('shareWeibo', {
              "content": desc,
              "url": share_url
            }, function (res) {});
          });

        }, false);